<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/index.css">
<style>
	html, body, #app {
		width: 100%;
		height: 100%;
	}
	.flex-container {  
	display: flex;  
	align-items: center; /* 垂直居中 */  
	justify-content: center; /* 水平居中，可选 */  
	height: 100px; /* 或者其他高度 */  
	}
	.d1{
		float: left;
		width: 60%;
		height: 42%;
	}
	.d2{
		float: left;
		margin-left: 5%;
		width: 30%;
		height: 23%;
	}
	.d4{
		float: left;
		margin-left: 5%;
		margin-top: 1%;
		width: 30%;
		height: 17%;
	}
	.d5{
		float: left;
		margin-top: 1%;
		width: 95%;
		height: 23%;
	}
	.d6{
		float: left;
		margin-top: 1%;
		width: 95%;
		height: 30%;
	}
	.c1{
		width: 48%;
		height: 80%;
		margin-right: 3.5%;
	}
	.cc1{
		width: 48%;
		height: 80%;
	}
	.f1{
		float: left;
	}
	.c2{
		width: 100%;
		height: 100%;
	}
	.c3{
		width: 100%;
		height: 100%;
	}
	.c4{
		width: 100%;
		height: 100%;
	}
	.c5{
		width: 100%;
		height: 100%;
	}
	.c6{
		width: 100%;
		height: 100%;
	}
	.c11{
		width: 48%;
		height: 20%;
		font-size: 20px;
	}
	.cc11{
		width: 48%;
		height: 20%;
		font-size: 20px;
	}
	.cc2{
		width: 100%;
		height: 10%;
		font-size: 20px;
	}
	.ccc2{
		margin-top: 20px;
		width: 100%;
		height: 100%;
	}
	.u1{
		width: 100%;
		height: 100%;
	}
	.u1 li{
		list-style: none;
		height: 100%;
		width: 85%;
	}
	.u1 li span{
		padding: 8px;
        text-align: center;
		width: 20%;
		height: 30%;
		font-size: 20px;
    }
	.num1{
		margin-left: 7%;
		margin-right: 2%;
	}
	.s1{
		margin-left: 2.8%;
	}
	.cc4{
		margin-top: 0;
	}
	.cc5{
		width: 100%;
		height: 80%;
		margin-top: 5px;
	}
	.u5{
		list-style: none;
	}
	.u5 li span{
		margin-right: 8%;
		margin-left: 3%;
	}
	.t1{
		width: 100%; /* 百分比宽度 */
		font-size: 20px;
	}
	
</style>
</head>
<body>
<div id="app">
	<div class="d1">
		<el-card class="box-card c1 f1" id="main1">
		</el-card>
		<el-card class="box-card cc1 f1" id="main2">
		</el-card>
		<div class="c11 f1 flex-container">今日总订单量</div>
		<div class="c11 f1 flex-container">今日博客发表量</div>
	</div>
		
	<div class="d2">
		<el-card class="box-card c2">
			<div class="cc2 f1">待处理业务</div>
			<div class="ccc2 f1">
				<table class="t1">
					<tr>
					<td style="text-align: center;">{{Number(ordernum[0]?.a) + Number(ordernum[0]?.b)}}</td>
					<td style="text-align: center;">{{ordernum[0]?.c}}</td>
					<td style="text-align: center;">{{ordernum[0]?.d}}</td>
					<td style="text-align: center;">{{ordernum[0]?.e}}</td></tr>

					<tr>
					<td style="text-align: center;">已完成</td>
					<td style="text-align: center;">待发货</td>
					<td style="text-align: center;">运输中</td>
					<td style="text-align: center;">退款中</td></tr>

					<tr>
					<td style="text-align: center;"><span class="el-icon-s-finance"></span></td>
					<td style="text-align: center;"><span class="el-icon-truck"></span></td>
					<td style="text-align: center;"><span class="el-icon-loading"></span></td>
					<td style="text-align: center;"><span class="el-icon-service"></span></td>
					</tr>
				</table>
			</div>
		</el-card>
	</div>

	<div class="d4">
		<el-card class="box-card c4">
			<div class="cc2 f1">商品概况</div>
			<div class="ccc2 f1 cc4">
				<table class="t1">
					<tr>
					<td style="text-align: center;" >{{productnum.a}}</td>
					<td style="text-align: center;" >{{productnum.b}}</td>
					<td style="text-align: center;" >{{productnum.c}}</td>
					<td style="text-align: center;" >{{productnum.d}}</td></tr>
					
					<tr>
					<td style="text-align: center;">总商品</td>
					<td style="text-align: center;">已上架</td>
					<td style="text-align: center;">已下架</td>
					<td style="text-align: center;">零库存</td></tr>
				</table>
			</div>
		</el-card>
	</div>

	<div class="d5">
		<el-card class="box-card c5">
			<div class="cc2 f1">常用操作</div>
			<div class="cc5 f1">
				<ul class="u5">
					<li>
						<span @click="fly(1)"><img src="../../../upload/user.png"></span>
						<span @click="fly(2)"><img src="../../../upload/product.png"></span>
						<span @click="fly(3)"><img src="../../../upload/type.png"></span>
						<span @click="fly(4)"><img src="../../../upload/order.png"></span>
						<span @click="fly(5)"><img src="../../../upload/blog.png"></span>
						<span @click="fly(6)"><img src="../../../upload/data.png"></span>
					</li>
					<li>
						<span>用户管理</span>
						<span>商品管理</span>
						<span>类别管理</span>
						<span>订单管理</span>
						<span>博客管理</span>
						<span>数据管理</span>
					</li>
				</ul>
			</div>
		</el-card>
	</div>

	<div class="d6">
		<el-card class="box-card c6" id="main3">
		</el-card>
	</div>
</div>
<script src="../js/vue.js"></script>
<script src="./js/index.js"></script>
<script src="../back/js/echarts.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/qs.js"></script>
<script>
let app = new Vue({
	el: '#app',
	data: {
		sum1:0,
		sum2:0,
		ordernum:[],
		productnum:{},
		weekordernum:[]
	},
	methods: {
		sumorder(){
			axios.post("../orderController/sumorderL").then(resp=>{
				this.sum1 = Number(resp.data);
			});
		},
		sumblog(){
			axios.post("../blogController/sumblog").then(resp=>{
				this.sum2 = Number(resp.data);
			});
		},
		//获取订单数量
		getordernumL(){
			axios.post("../orderController/getordernumL").then(resp=>{
				this.ordernum = resp.data;
			});
		},
		//获取商品概况
		getproductnumL(){
			axios.post("../productController/getproductnumL").then(resp=>{
				this.productnum = resp.data;
			});
		},
		//查询当周的营业额
		getweekordernum(){
			axios.post("../orderController/getweekordernum").then(resp=>{
				this.weekordernum = resp.data;
			});
		},
		//跳转页面
		fly(f){
			window.parent.toPage("goods/show");
		}
	},
	created(){
		//获取订单数量
		this.getordernumL();
		//获取商品概况
		this.getproductnumL();
		//获取当周营业
		this.getweekordernum();
	},
	computed: {
		chartOptions(){
			return {
				    tooltip : {
				        formatter: "{a}{b} : {c}单"
				    },
				    series: [
				        {
				            name: '订单',
				            type: 'gauge',
				            detail: {formatter:'{value}'},
				            data: [{value:this.sum1, name: ''}],
				             axisLine: {
				                show: true,
				                lineStyle: {
				                  color: [
				                    [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
				                      {
				                        offset: 0.1,
				                        color: "#FFC600"
				                      },
				                      {
				                        offset: 0.6,
				                        color: "#30D27C"
				                      },
				                      {
				                        offset: 1,
				                        color: "#0B95FF"
				                      }
				                    ])
				                  ]
				                ]
				                  
				                }
				             }
				            
				        }
				    ]
				};
		},
		chartOptions2(){
			return {
				    tooltip : {
				        formatter: "{a}{b} : {c}篇"
				    },
				    series: [
				        {
				            name: '博客',
				            type: 'gauge',
				            detail: {formatter:'{value}'},
				            data: [{value: this.sum2, name: ''}],
				             axisLine: {
				                show: true,
				                lineStyle: {
				                  color: [
				                    [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
				                      {
				                        offset: 0.1,
				                        color: "#FFC600"
				                      },
				                      {
				                        offset: 0.6,
				                        color: "#30D27C"
				                      },
				                      {
				                        offset: 1,
				                        color: "#0B95FF"
				                      }
				                    ])
				                  ]
				                ]
				                  
				                }
				             }
				            
				        }
				    ]
				};
		},
		line(){
			return {
				title: {  
		            text: '近7日有效订单',  // 标题文本  
		            left: 'center'        // 标题位置，这里设置为居中  
		        },
			xAxis: {
				type: 'category',
				data: ['6', '5', '4', '3', '2', '1', '0']
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{	
			        itemStyle : { normal: {label : {show: true}}},   //重点是这句加上了后可以显示数字。不然不显示
					data: [this.weekordernum[6].a, this.weekordernum[5].a, this.weekordernum[4].a, this.weekordernum[3].a, this.weekordernum[2].a, this.weekordernum[1].a, this.weekordernum[0].a],
				type: 'line',
				smooth: true
				}
			]
			};
		}
	},
	mounted(){
		var chartDom = document.getElementById('main1');  
	    var myChart = echarts.init(chartDom);  
	    myChart.setOption(this.chartOptions);  
	  
	    // 使用 $watch 监听 chartOptions 的变化  
	    this.$watch('chartOptions', (newOptions) => {  
	      myChart.setOption(newOptions);  
	    }, { deep: true });
	  
	    // 第二个图表的初始化  
	    var chartDom2 = document.getElementById('main2');  
	    var myChart2 = echarts.init(chartDom2);  
	    myChart2.setOption(this.chartOptions2); // 注意这里使用 myChart2 而不是 myChart1  
	  
	    // 第二个图表的 $watch  
	    this.$watch('chartOptions2', (newOptions) => {  
	      myChart2.setOption(newOptions);  
	    }, { deep: true }); 
		
	 // 延迟1秒后初始化图表配置  
	    setTimeout(() => {  
	    	// 第三个图表的初始化  
			var chartDom3 = document.getElementById('main3');
			var myChart3 = echarts.init(chartDom3); 
		    myChart3.setOption(this.line); // 注意这里使用 myChart2 而不是 myChart1  
		  
		    // 第三个图表的 $watch  
		    this.$watch('line', (newOptions) => {  
		      myChart3.setOption(newOptions);
		    }, { deep: true });  
	    }, 500); // 延迟1000毫秒（即1秒）
	  
	    // 调用方法加载数据
	    this.getweekordernum();
	    this.sumorder();
	    this.sumblog();
	}
});
</script>
</body>
</html>